<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
            integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
            crossorigin="anonymous"
        />
        <!-- Bootstrap CSS -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="./style.css" />
        <title>Welcome to loopLAB</title>
    </head>
    <body>
        <!-- nav bar section -->
        <nav class="navbar navbar-expand-sm navbar-dark fixed-top" id="main-nav">
            <div class="container">
                <a class="navbar-brand" href="#">LoopLAB</a>
                <button
                    class="navbar-toggler d-lg-none"
                    type="button"
                    data-toggle="collapse"
                    data-target="#collapsibleNavId"
                    aria-controls="collapsibleNavId"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Explore</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Create</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Share</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- header section -->
        <div id="home">
            <div class="overlay">
                <div class="container inner-home">
                    <div class="row">
                        <div class="col-lg-8 d-none d-lg-block">
                            <h1 class="display-4">
                                Build <strong>social profile</strong> and gain revenue profits
                            </h1>
                            <ul class="list-unstyled">
                                <li class="d-flex justify-content-between align-items-center">
                                    <div class="p-4">
                                        <i class="fas fa-check fa-2x "></i>
                                    </div>
                                    <p>
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                        Sed, tempore iusto in minima facere dolorem!
                                    </p>
                                </li>
                                <li class="d-flex justify-content-between align-items-center">
                                    <div class="p-4 ">
                                        <i class="fas fa-check fa-2x"></i>
                                    </div>
                                    <p>
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                        Sed, tempore iusto in minima facere dolorem!
                                    </p>
                                </li>
                                <li class="d-flex justify-content-between align-items-center">
                                    <div class="p-4">
                                        <i class="fas fa-check fa-2x "></i>
                                    </div>
                                    <p>
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                        Sed, tempore iusto in minima facere dolorem!
                                    </p>
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-4">
                            <div class="card bg-primary text-light">
                                <div class="card-body">
                                    <h4 class="card-title">Sign up today</h4>
                                    <p class="card-subtitle mb-2">
                                        Please fill out this from to register
                                    </p>
                                    <form action="">
                                        <div class="form-group">
                                            <input
                                                type="text"
                                                class="form-control form-control-lg"
                                                placeholder="Username"
                                            />
                                        </div>
                                        <div class="form-group">
                                            <input
                                                type="text"
                                                class="form-control form-control-lg"
                                                placeholder="Email"
                                            />
                                        </div>
                                        <div class="form-group">
                                            <input
                                                type="text"
                                                class="form-control form-control-lg"
                                                placeholder="Password"
                                            />
                                        </div>
                                        <div class="form-group">
                                            <input
                                                type="text"
                                                class="form-control form-control-lg"
                                                placeholder="Confirm Password"
                                            />
                                        </div>
                                        <input
                                            type="submit"
                                            value="submit"
                                            class="btn btn-outline-light btn-block"
                                        />
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- explore-head-section -->
        <section id="explore-head-section" class="text-center">
            <div class="container">
                <div class="row">
                    <div class="col text-align py-5">
                        <h3 class="display-4">Explore</h3>
                        <p class="lead">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo architecto
                            eligendi deserunt doloribus, in officia enim distinctio doloremque
                            facilis quasi ex nesciunt dignissimos illo. Neque delectus placeat
                            inventore quod natus.
                        </p>
                        <button class="btn btn-outline-secondary">Find out more</button>
                    </div>
                </div>
            </div>
        </section>
        <!-- explore section -->
        <section class="explore-section bg-light py-5">
            <div class="container">
                <div class="row ">
                    <div class="col-md-6">
                        <img
                            src="./img/explore-section1.jpg"
                            class="img-fluid rounded rounded-circle"
                            alt=""
                        />
                    </div>
                    <div class="col-md-6 text-muted">
                        <h3>Explore & Connect</h3>
                        <p>
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore
                            reiciendis, voluptate at alias laborum odit aliquid tempore perspiciatis
                            repudiandae hic?
                        </p>
                        <ul class="list-unstyled">
                            <li class="d-flex justify-content-between align-items-center">
                                <div class="p-4">
                                    <i class="fas fa-check fa-2x "></i>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed,
                                    tempore iusto in minima facere dolorem!
                                </p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <div class="p-4">
                                    <i class="fas fa-check fa-2x "></i>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed,
                                    tempore iusto in minima facere dolorem!
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- create-head-section -->
        <section id="create-head-section" class="text-center bg-primary text-light">
            <div class="container">
                <div class="row">
                    <div class="col text-align py-5">
                        <h3 class="display-4">Create</h3>
                        <p class="lead">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo architecto
                            eligendi deserunt doloribus, in officia enim distinctio doloremque
                            facilis quasi ex nesciunt dignissimos illo. Neque delectus placeat
                            inventore quod natus.
                        </p>
                        <button class="btn btn-outline-light">Find out more</button>
                    </div>
                </div>
            </div>
        </section>
        <!-- create section -->
        <section class="create-section bg-dark text-light py-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 order-md-2">
                            <img
                                src="./img/create-section1.jpg"
                                class="img-fluid rounded rounded-circle"
                                alt=""
                            />
                        </div>
                    <div class="col-md-6 order-md-1">
                        <h3>Create your passion</h3>
                        <p>
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore
                            reiciendis, voluptate at alias laborum odit aliquid tempore perspiciatis
                            repudiandae hic?
                        </p>
                        <ul class="list-unstyled">
                            <li class="d-flex justify-content-between align-items-center">
                                <div class="p-4">
                                    <i class="fas fa-check fa-2x "></i>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed,
                                    tempore iusto in minima facere dolorem!
                                </p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <div class="p-4">
                                    <i class="fas fa-check fa-2x "></i>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed,
                                    tempore iusto in minima facere dolorem!
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- share-head-section -->
        <section id="explore-head-section" class="text-center bg-primary text-light">
            <div class="container">
                <div class="row">
                    <div class="col text-align py-5">
                        <h3 class="display-4">Share</h3>
                        <p class="lead">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo architecto
                            eligendi deserunt doloribus, in officia enim distinctio doloremque
                            facilis quasi ex nesciunt dignissimos illo. Neque delectus placeat
                            inventore quod natus.
                        </p>
                        <button class="btn btn-outline-light">Find out more</button>
                    </div>
                </div>
            </div>
        </section>
        <!-- explore section -->
        <section class="explore-section bg-light py-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <img
                            src="./img/share-section1.jpg"
                            class="img-fluid rounded rounded-circle"
                            alt=""
                        />
                    </div>
                    <div class="col-md-6 text-muted">
                        <h3>Share</h3>
                        <p>
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore
                            reiciendis, voluptate at alias laborum odit aliquid tempore perspiciatis
                            repudiandae hic?
                        </p>
                        <ul class="list-unstyled">
                            <li class="d-flex justify-content-between align-items-center">
                                <div class="p-4">
                                    <i class="fas fa-check fa-2x "></i>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed,
                                    tempore iusto in minima facere dolorem!
                                </p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <div class="p-4">
                                    <i class="fas fa-check fa-2x "></i>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed,
                                    tempore iusto in minima facere dolorem!
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- share-head-section -->
        <footer class="text-center bg-dark text-light">
            <div class="container">
                <div class="row">
                    <div class="col text-align py-5">
                        <h3 >loopLAB</h3>
                        <p >
                            copyright &copy; 2019
                        </p>
                        <button class="btn btn-primary">Contact Us</button>
                    </div>
                </div>
            </div>
        </fo>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script
            src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"
        ></script>
    </body>
</html>
